<template>
    <div class="mine">

        <div class="info">
            <div class="user">
                <p class="name">{{info.name}}/首席设计师</p>
                <p class="account">账号:<span>{{info.id}}</span> </p>
                <p class="phone">手机:<span>{{info.phone}}</span></p>
            </div>
            <div class="photo">
                <i></i>
                <div class="toux"></div>
            </div>
        </div>
        <div class="back">
        </div>
        <div class="content">
                <div class="item" v-for="it in list" :key="it.id" @click="toPath(it)" >
                    <i :class="['icon', it.className]"></i>
                    <span>{{it.title}}</span>
                    <i class="arrow"></i>
                </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import {Toast} from 'vant'
import Tabbar from '../components/tabbar/index.vue'
import { reactive, ref } from 'vue'
import { deCodeApi } from '../../utils'
    const list =ref([
        {
            title:'考勤记录',
            className:'check',
            path:'/record'
        },
        {
            title:'修改密码',
            className:'change',
            path:'/forget'
        }
        ,
        {
            title:'无效打卡管理',
            className:'disable'
        },
        {
            title:'交易中心排班',
            className:'trade'
        },
        {
            title:'设置中心',
            className:'setting'
        },
        {
            title:'退出登录',
            className:'exitLogin',
            path:'/login'
        },
    ])
    const router = useRouter()
    let info=reactive({})
    info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))
    function toPath(it){
        if(!it.path){
            Toast('该功能还未开放')
            return
        }
        else{
//判断是否点击退出登录继续点了确定            
             if(it.title==='退出登录'){
            if(confirm('你确定要退出登录吗?')){
                localStorage.clear() 
                sessionStorage.clear()
                router.push('/login')
            }else{
            return
            }
        }
            router.push(it.path)
        }
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .mine{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #f5f5f8;
        .info{
            height: 22vh;
            display:flex;
            background-color:@c00 ;
            .user{
                width: 50vw;
                height: 100%;
                .name{
                    display: block;
                    height: 7vh;
                    width: 45vw;
                    font-size: .8rem;
                    color: white;
                    color: rgb(255, 255, 255);
                    line-height: 13vh;
                    padding-left: 5vw;
                }
                .account{
                    display: block;
                    height: 3vh;
                    font-size: .65rem;
                    color: rgb(226, 220, 220);
                    padding-left: 5vw;
                    margin: 0 auto;
                    span{
                        padding-left: 2vw;
                    }
                }
                .phone{
                    color: rgb(226, 220, 220);
                    margin-bottom: 5vh;
                    padding-left: 5vw;
                    display: block;
                    height: 5vh;
                    font-size: .65rem;
                    margin: 1vh auto;
                    span{
                        padding-left: 2vw;
                    }
                }
            }
            .photo{
                width: 50vw;
                height: 100%;
                overflow: hidden;
                i{
                    display: block;
                    height: 7vh;
                    width: 40vw;
                    margin: auto;
                    background: url('../../images/saoyisao.png') right center /30px 30px no-repeat;
                }
                .toux{
                    width: 50px;
                    height: 50px;
                    margin: auto 27vw;
                    background: url('../../images/toux1.png') right top/50px 50px no-repeat;
                    border-radius: 50%;
                }
            }
        }
        .back{
            width: 100vw;
            height: 15vh;
            background: url('../../images/back.png') center center /100vw 15vh no-repeat;
            display: flex;
            border-top: 1px solid @c00;
        }
        .content{
        height: 55vh;
        width: 100%;
        flex-direction: column;
        overflow-y: scroll;
        .item{
            width: 100vw;
            height: 10vh;
            background: white;
            text-align: center;
            margin: 1vh auto;
            display: flex;
            flex-wrap: nowrap;
            .icon{
                display: block;
                width: 20vw;
                height: 10vh;
                background: url('../../images/check.png')center center/ 32px 32px no-repeat ;
            }
            span{
                width: 60vw;
                line-height: 10.5vh;
                text-align: left;
                font-size: .8rem;
                color: gray;
            }
            .arrow{
                display: block;
                width: 20vw;
                height: 10vh;
                background: url('../../images/right-arrow.png')center center/ 16px 16px no-repeat ;
            }
        }
    }
    }
    .check{
        background: url('../../images/check.png')center center/ 32px 32px no-repeat !important;
    }
    .disable{
        background: url('../../images/disable.png')center center/ 32px 32px no-repeat !important;
    }
    .trade{
        background: url('../../images/trade.png')center center/ 32px 32px no-repeat !important;
    }
    .setting{
        background: url('../../images/setting.png')center center/ 32px 32px no-repeat !important;
    }
    .change{
        background: url('../../images/changePassword.png')center center/ 32px 32px no-repeat !important;
    }
    .exitLogin{
        background: url('../../images/exitLogin.png')center center/ 32px 32px no-repeat !important;
    }
</style>